<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            /*2020年之前:html中的字体大小最小的是12px，所以这里要扩大10倍
              但是我们这里已经生效了
            */
            font-size: 0.1333333333333333vw;/*1px大小*/
        }
        .box{
            width: 48rem;/*1rem=1html的字体大小*/
            height: 37rem;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <!--
          100vw=750px(假设设计图上面的宽度是750px)
           假如我要在移动端设计一个width=48px height=37px的div，怎么做呢？
           100vw=750px  1px=0.1333333333333333vw

           那么?vm=48px??,那么48*0.1333333333333333结果肯定有误差,所以要做适配
    -->

    <div class="box"></div>
</body>
</html>